import { Drawer } from 'antd';
import React from 'react';
import RzGraphin, { IGraphinProps } from './components/Graphin';
import NodeInfo from './components/NodeInfo';

interface IRzGraphinManageProps extends IGraphinProps {}

const RzGraphinManage = (props: IRzGraphinManageProps) => {
  const { data, type, onNodeClick } = props;

  const [isNodeInfo, setIsNodeInfo] = React.useState<boolean>(false);
  const [nodeInfo, setNodeInfo] = React.useState<any>({});

  const onMyNodeClick = (_data: any) => {
    setIsNodeInfo(true);
    setNodeInfo({ ..._data });
  };

  return (
    <div style={{ width: '100%', height: '100%', position: 'relative' }}>
      <RzGraphin data={data} type={type} onNodeClick={onMyNodeClick} />
      <Drawer
        width={300}
        style={{ position: 'absolute', top: 0 }}
        visible={isNodeInfo}
        title={nodeInfo?.data?.name}
        getContainer={false}
        onClose={() => setIsNodeInfo(false)}
        mask={false}
      >
        <NodeInfo />
      </Drawer>
    </div>
  );
};

export default RzGraphinManage;
